import { defineComponent } from 'vue'
import { useSvgState } from '../hooks/useSvgState'

export default defineComponent({
  name: 'SvgPreview',
  setup () {
    const { svgState } = useSvgState()
    /* render 函数 */
    return () => {
      const { components, previewColor } = svgState
      const svgComponents = components.map(component => {
        const { type, ...options } = component
        return (
          <type { ...options } />
        )
      })
      return (
        <div class="w-96 h-96 border-2 border-gray-400" style={{ color: previewColor }}>
          <svg viewBox="0 0 1024 1024">{ svgComponents }</svg>
        </div>
      )
    }
  }
})
